import React from 'react';
import * as utils from '../../../../components/utils/utils';
import './signinSuccessModal.css';

class SigninSuccessModal extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            visible: this.props.visible,
            result: this.props.result
        };

        this.storage = {
            AWARD_TYPE_NOTHING: 0,
            AWARD_TYPE_LOTTERY: 1,
            AWARD_TYPE_REDBAG: 2
        };

        this.handleCloseBtnClick = this.handleCloseBtnClick.bind(this);
    }

    static getDerivedStateFromProps (props, state) {
        if (props.visible) {
            utils.disableDocumentScroll.add();
        }

        return {
            visible: props.visible,
            result: props.result
        };
    }

    componentDidMount () {
    }

    handleCloseBtnClick () {
        this.setState({
            visible: false
        }, () => {
            utils.disableDocumentScroll.remove();
            this.props.onClose();
        });
    }

    render () {
        const awardTitleMap = {
            0: '',
            1: '抽奖机会',
            2: '红包'
        };
        const awardImageClassNameMap = {
            0: '',
            1: 'lottery',
            2: 'redbag'
        };
        const awardFutureMap = {
            0: '',
            1: '参与抽奖',
            2: '获得红包'
        };
        const canGetAwardToday = this.state.result.getAwardNeedDays === 0 && this.state.result.awardType > 0;
        const canGetAwardFuture = this.state.result.getAwardNeedDays > 0 && this.state.result.awardType > 0;
        const hasAward = this.state.result.getAwardNeedDays !== -1 && this.state.result.awardType > 0;
        const isRedbagAward = this.state.result.awardType === this.storage.AWARD_TYPE_REDBAG;

        return (
            <div className={`signinSucessModal ${this.state.visible ? 'show' : ''} ${canGetAwardToday ? 'win' : ''} ${canGetAwardFuture ? 'willWin' : ''}`}>
                <div className="mask"></div>
                <div className="cont">
                    <div className="ribbon"></div>
                    <div className="cont-bd">
                        <h2 className="title">签到成功</h2>
                        <div className="award">
                            {
                                canGetAwardToday
                                    ? <p className="award-title">{`恭喜获得${awardTitleMap[this.state.result.awardType]}`}</p>
                                    : ''
                            }
                            {
                                canGetAwardToday
                                    ? <div className={`award-image ${awardImageClassNameMap[this.state.result.awardType]}`}></div>
                                    : ''
                            }
                            <p className="award-detail">
                                {canGetAwardToday ? '' : <span style={{ marginRight: '3px' }}>获得</span> }
                                <span style={{ marginRight: '2em' }}>糗币<strong>{`+${this.state.result.addedCoin}`}</strong></span>
                                <span>糗友圈积分<strong>{`+${this.state.result.addedScore}`}</strong></span>
                            </p>
                            {
                                !canGetAwardToday && hasAward
                                    ? <div
                                        className={`award-future ${awardImageClassNameMap[this.state.result.awardType]}`}
                                    >
                                        再签
                                        <strong>{` ${this.state.result.getAwardNeedDays}天 `}</strong>
                                        {`可${awardFutureMap[this.state.result.awardType]}哦~`}
                                    </div>
                                    : ''
                            }
                            {
                                canGetAwardToday && isRedbagAward
                                    ? <div className="btn-openRedBag" onClick={this.handleCloseBtnClick}>拆红包</div>
                                    : <div className="btn-closeModal" onClick={this.handleCloseBtnClick}>领取奖励</div>

                            }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default SigninSuccessModal;
